/**
 * Created by python on 18-11-12.
 */
let app = new Vue({
    el:"#app",
    data:{
         // 页面中需要使用到的数据，键值对
        host:'http://127.0.0.1:8000/headline/',
        host2: 'http://127.0.0.1:8000',
        username: sessionStorage.username || localStorage.username,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        value:'',
        comments: [],
        avatar: 'img/widget-photo.png',
        content: '',
        parent_id: '',
        user_is_active: false,
    },
    created:function () {
        news_id = this.get_query_string("id", 1);
        // 判断用户的登录状态
        if (this.user_id && this.token) {
            axios.get(this.host2 + '/user/', {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
                .then(response => {
                    // 加载用户数据
                    this.user_id = response.data.id;
                    this.username = response.data.username;
                    this.avatar = response.data.avatar;
                    this.user_is_active = true
                })
        };
        this.get_news_detail()
    },
    methods: {
        // 表单提交
        on_submit: function(){
            if (this.user_is_active ) {
                axios.post(this.host + 'news/comment/', {
                    content: this.content,
                    news_id: news_id,
                    parent_id: this.parent_id,
                }, {
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })
                    .then(response => {
                        console.log(response);
                        alert('创建成功')
                        location.reload();
                    })
                    .catch(error => {
                        if (error.response.status == 401) {
                            console.log('请登录后操作误');
                        } else {
                            console.log(error);
                            ;
                        }
                    })
            } else {
                location.href = '/login.html?next=/headline-detail.html';
            }
        },
        // 获取url路径参数
        get_query_string: function (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            }
            // 不指定新闻id的话默认展示１
            return 1
            // return null;
        },
        get_news_detail: function () {
            axios.get(this.host + 'news/' + news_id)
            .then(response =>{
                    this.value = response.data;
                    this.comments = response.data.comment_set
                })
            .catch(error =>{
                console.log(error)
            })
        },
        commit_comment: function () {
            if (this.user_is_active) {
                axios.post(this.host + 'news/comment/', {
                    content: this.content,
                    news_id: news_id,
                }, {
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                    withCredentials: true
                })
                    .then(response => {
                        console.log(response);
                        alert('创建成功')
                        location.reload();
                    })
                    .catch(error => {
                        console.log(error)
                    })
            } else {
                location.href = '/login.html?next=/headline-detail.html';
            }
        }
    },
    filters:{
        // 1 字符串类型日期 转 日期类型日期 str2date
        // 2 日期 -获取年月日  date2ymmd
        // 3 日期 - 获取十分秒 date2hms
        // 4 日期 - 星期 周  date2w
        // 显示 年月日 时分
        str2date:function (value) {
            return new Date(value)
        },
        date2ymd:function (value) {
            return value.getFullYear() + "年" + (value.getMonth()+1) + "月" + value.getDate() + "日"
        },
        date2hms:function (value) {
            return value.getHours() + ":" +value.getMinutes()
        }
    },
})